<template>
  <div id="apartment-detail">
    <!-- 轮播图 -->
    <section class="detail-banner">
      <swiper :list="images" dots-position="center" height="280px" auto :show-desc-mask="false"></swiper>
      <section class="figcaption pad-side-15">
        <div class="detail-title-wrap">
          <h3 class="detail-title line-height-135" v-if="houseTitle">{{houseTitle}}</h3>
          <p class="detail-price line-height-135" v-if="rentalPrice">￥{{rentalPrice}}/月</p>
          <p class='detail-logo'><img src="../../images/rent/baologo.png" alt=""> 保障：100%真实房源</p>
          <p class="detail-tag line-height-135" v-if="highlights.length > 0">
            <span class="m-noprice" v-if="isFreeDeposit == 1">诚信免押</span>
            <span v-for="(highlight, index) in highlights" :key="index">{{highlight}}</span>
          </p>
        </div>
        <div class="detail-btns">
          <div class="detail-btn">
            <!-- 已关注 -->
            <i class="click-extend" @click="cancelConcern" v-if="isAttention">
              <img src="../../images/rent/detail_ygz.png">
            </i>
            <!-- 未关注 -->
            <i class="click-extend" @click="concern" v-else>
              <img src="../../images/rent/detail_wgz.png">
            </i>
          </div>
        </div>
      </section>
      <img class="renting-logo-img" src="../../images/renting-logo.png" v-if= "status === 1002">
    </section>
    <!-- 公寓信息 -->
    <section class="detail-infos pad-side-15" v-if="layout || area">
      <div class="info-cell" v-if="layout">
        <p class="info-content"> <span>{{layout}}</span> <span>户型</span></p>
      </div>
      <div class="info-cell" v-if="area">
        <p class="info-content"> <span>{{area}}m²</span> <span>面积</span></p>
      </div>
    </section>
    <!-- 公寓地址 -->
    <!-- <section class="detail-address">
      <group>
        <cell :title="`${address}`" is-link>
          <img slot="icon" class="location" width="20" src="../../images/rent/detail_wz.png">
        </cell>
      </group>
    </section> -->
    <!-- 房源提示 -->
    <section class="house-prompt">
      <p>机构房源已经平台审核，用户选择机构房源的，需与机构房源线上平台或者线下签约，签约效力等同于通过平台签约效力</p>
    </section>
    <!-- 房源详情 -->
    <section class="housing-section" v-if="towards || type">
      <p class="housing-title">房屋介绍</p>
      <!-- 房源信息 -->
      <div class="housing-table f-text14">
        <p class="housing-item" v-if="type">类型：<span>{{type}}</span></p>
        <p class="housing-item" v-if="towards">朝向：<span>{{towards}}</span></p>
      </div>
      <!-- 房源设备 -->
      <div class="housing-facilities">

      </div>
    </section>
    <!-- 位置信息 -->
    <section class="housing-section" v-if="lat && lng">
      <p class="housing-title">位置信息</p>
      <div class="houseMap" @click="$router.push({path: '/houseMap', query:{lat, lng}})">
        <house-map :lat="lat" :lng="lng"></house-map>
      </div>
    </section>
    <!-- 独用设施 -->
    <section class="housing-section" v-if="facility.length > 0">
      <p class="housing-title">独用设施</p>
      <div class="housing-table">
        <p class="housing-item width-33" v-for="(facilityItem, index) in facility" :key="index">{{facilityItem}}</p>
      </div>
    </section>
    <!-- 举报投诉 -->
    <section class="housing-link">
      <group>
        <!-- <cell title="房租太贵了？" value="发起找人合租" is-link></cell> -->
        <cell title="房源信息有误？" value="我要举报" is-link @click.native="report"></cell>
      </group>
    </section>
    <!-- 联系房东 -->
    <!-- <div class="contact" v-if="mobile" @click="contactLandlor"></div> -->
    <section class="detail-foot">
      <div class="foot-bar">
        <!--<div class="foot-btn">
          <p>￥{{rentalPrice}}元起</p>
        </div>-->
        <a class="foot-btn sign-btn contact-tel" :href="'tel:' + (tel || '')">
          请联系中介：{{tel || ''}}
        </a>
        <!-- <div v-else class="foot-btn sign-btn" @click="contactLandlor">
          <p class="sign">联系公寓</p>
        </div> -->
      </div>
    </section>
    <div class="rental-look" v-if="videoUri" @click="lookVr()">
      <img src="../../images/look.png" alt="">
    </div>
    <report-dialog :showReport="showReport" @hide="showReport = false" :data="reportData"></report-dialog>
  </div>
</template>

<script>
import { Swiper, Cell } from 'vux'
import HouseMap from '../rent/houseMap'
import ReportDialog from '@/views/rent/child/ReportDialog'
export default {
  components: {
    Swiper,
    Cell,
    HouseMap,
    ReportDialog
  },
  data () {
    return {
      tel: '', // 中介电话
      houseId: '', // 房源id
      status: '',
      videoUri: '', // 全景看房
      houseTitle: '', // 房源标题
      coverImg: '', // 封面图
      address: '', // 房源地址
      rentalPrice: '', // 租金
      isFreeDeposit: '', // 是否诚信免押
      highlights: [], // 标签
      area: '', // 面积
      layout: '', // 户型
      lat: '', // 纬度
      lng: '', // 经度
      type: '机构房源', // 类型
      towards: '', // 朝向
      projectId: '', // 项目ID
      configuration: [], // 独用设施
      rooms: [], // 房间
      facility: [], // 房源介绍
      source: '', // 来源
      isAttention: false, // 是否关注
      roomTypeId: '', // 户型ID
      mobile: '', // 公寓电话
      virtualNum: '', // 虚拟号码
      images: [], // 轮播图数据
      showReport: false, // 举报弹窗
      userInfo: {}, // 用户信息
      typeNun: 2, // 关注的房屋类型
      currentUserId: '', // 登录用户id
      reportData: {
        trueName: '', // 用户姓名
        mobile: '', // 用户手机
        idCard: '', // 用户身份证
        htitle: '', // 房源吧标题
        type: '2'
      }
    }
  },
  methods: {
    // 关注房源
    concern () {
      if (this.currentUserId) {
        this.$axiosPosting(this.$api.concernHouse, {houseId: this.houseId, userId: this.userInfo.id, type: this.typeNun}).then(res => {
          if (res.code === '0000') {
            if (this.isAttention === true) {
              this.isAttention = false
            } else if (this.isAttention === false) {
              this.$vux.toast.text('关注成功')
              this.isAttention = true
            }
          } else {
            this.$vux.toast.text(res.msg)
          }
        })
      } else {
        this.$router.push('/login')
      }
    },
    // 取消关注房源
    cancelConcern () {
      if (this.currentUserId) {
        this.$axiosPosting(this.$api.cancleConcernHouse, {houseId: this.houseId, userId: this.userInfo.id, type: this.typeNun}).then(res => {
          if (res.code === '0000') {
            if (this.isAttention === true) {
              this.isAttention = false
              this.$vux.toast.text('已取消关注')
            } else if (this.isAttention === false) {
              this.isAttention = true
              this.$vux.toast.text('关注成功')
            }
          } else {
            this.$vux.toast.text(res.msg)
          }
        })
      } else {
        this.$router.push('/login')
      }
    },
    report () {
      if (this.userInfo.id) {
        if (this.userInfo.idCard) {
          this.reportData = {
            trueName: this.userInfo.trueName, // 姓名
            mobile: this.userInfo.mobile, // 手机
            idCard: this.userInfo.idCard, // 身份证
            htitle: this.houseTitle, // 房源标题
            type: '2' // 房源类型 机构房源
          }
          this.showReport = true
        } else {
          this.$router.push('/certify') // 实名认证
        }
      } else {
        this.$router.push('/login') // 登录
      }
    },
    getInit (id) {
      this.$axiosGeting(this.$api.getApartmentHouseDetail, {id: id, type: this.typeNun}).then(res => {
        console.log('详细信息111', res)
        if (res.code === '0000') {
          this.houseId = res.hApartment.id // 房源Id
          this.coverImg = res.hApartment.cover // 封面图
          if (res.hApartment.source === '58') {
            res.hApartment.images && res.hApartment.images.split(',').map(item => {
              this.images.push({img: item})
            })
          } else {
            res.hApartment.images && res.hApartment.images.split(',').map(item => {
              this.images.push({img: item})
            })
          }
          this.source = res.hApartment.source // 来源
          this.status = res.hApartment.status || 1000 // 来源
          this.houseTitle = res.hApartment.name // 标题
          this.rentalPrice = res.hApartment.minprice // 租金
          // console.log(this.rentalPrice)
          this.isFreeDeposit = res.hApartment.hApartment // 是否诚信免押
          this.address = res.hApartment.address // 地址
          this.highlights = res.hApartment.configuration ? res.hApartment.configuration.split(',') : [] // 标签
          this.area = res.hApartment.area !== 0 ? (res.hApartment.area + '') : '-' // 面积
          this.layout = res.hApartment.structure // 户型
          this.towards = res.hApartment.towards // 朝向
          this.lat = res.hApartment.latitude // 纬度
          this.lng = res.hApartment.longitude // 经度
          this.roomTypeId = res.hApartment.roomTypeId // 户型ID
          this.projectId = res.hApartment.projectId // 项目ID
          this.videoUri = res.hApartment.video // 全景看房链接
          this.mobile = res.hApartment.contactIphone ? res.hApartment.contactIphone.replace('-', '') : ''
          this.tel = res.hApartment.phone ? res.hApartment.phone.replace('-', '') : '' // 中介电话
          this.facility = res.hApartment.facility && res.hApartment.facility.split(',')
          this.rooms = res.rooms
          this.isAttention = res.hApartment.isAttention === 1 // 是否关注
        }
      })
    },
    // 全景看房
    lookVr () {
      window.location.href = this.videoUri
    },
    goHouseList (tel) {
      // this.$router.push({path: './houseCheckList', query: {id: this.roomTypeId, projectId: this.projectId}})
      this.$vux.toast.text(`请联系中介：` + tel, 'middle', 3000)
    },
    // 联系房东
    contactLandlor () {
      let userInfo = JSON.parse(window.localStorage.getItem('userInfo') || '{}')
      let mobileFor = userInfo ? userInfo.mobile : ''
      if (mobileFor) {
        if (this.virtualNum === '') {
          this.$axiosPosting(this.$api.getVirtualNum, {mobileFor, mobileTo: this.mobile}).then(res => {
            let data = JSON.parse(res.data)
            if (data.errorCode === '0') {
              this.virtualNum = data.virtualNum
              window.location.href = `tel:${this.virtualNum}`
            } else {
              this.$vux.toast.text('无法获取房东电话')
              this.virtualNum = ''
            }
          })
        } else {
          window.location.href = `tel:${this.virtualNum}`
        }
      } else {
        this.$router.replace('/login')
      }
    }
  },
  created () {
    this.userInfo = JSON.parse(window.localStorage.getItem('userInfo') || '{}')
    this.currentUserId = this.userInfo.id || ''
    let id = this.$route.query.id
    this.getInit(id)
  }
}
</script>

<style lang="less" scoped>
  @import "../../styles/baseVar.less";
  #apartment-detail{
    min-height: 100vh;
    // font-size: 12px;
    line-height: 1.7;
    .rental-look{
      position: absolute;
      top:215px;
      right:15px;
      // background:white;
      opacity: .7;
      width:50px;
      height:50px;
      border-radius: 50%;
      img{
        width:100%;
        height:100%;
        object-fit: cover;
      }
    }
    .icon{
      display: inline-block;
    }
    .pad-side-15{
      padding: 0 15px;
    }
    .detail-banner{
      background: #fff;
    }
    .renting-logo-img{
      width: 6rem;
      position: absolute;
      right:0;
      top:0;
    }
    .house-prompt{
      padding:17px;
      font-size: 0.6rem;
      color: #666;
      background-color: #f4f4f4;
    }
    .housing-section{
      padding: 25px 15px;
      background: #fff;
      // margin-bottom: 6px
      border-bottom: 1px solid #f4f4f4;
      &:last-of-type{
        margin-bottom: 0;
      }
    }
    .figcaption{
      padding-top: 10px;
      padding-bottom: 10px;
      display: flex;
      border-bottom: 1px solid #f4f4f4;
      .detail-title-wrap{
        .line-height-135{
          line-height: 1.35;
        }
        width: 100%;
        .detail-title{
          margin-top: 12px;
          // width: 250px; /* 500/40 */
          font-size: 19px; /* 38/40 */
          color: #333;
          font-weight: normal;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          font-weight: bold;
        }
        .detail-price{
          font-size: 20px;
          font-weight: bold;
          color: #ff3c00;
          display: flex;
          align-items: center;
        }
        .detail-logo{
          font-size:15px;
          color:#777;
          display: flex;
          align-items: center;
          img{
            width: 18px;height: 18px;
            padding-right: 5px;
          }
        }
        .detail-tag{
          display: flex;
          flex-wrap: wrap;
          padding: 8px 0px 15px;
          span{
            display: inline-block;
            min-width: 50px;
            padding: 0 5px;
            text-align: center;
            font-size: 10px; /* 20/40 */
            line-height: 18px;
            border-radius: 4px;
            color: @badge-color;
            border: 1px solid @badge-color;
            box-sizing: border-box;
            margin-right: 7px;
          }
          .m-noprice{
            background: #dea34c;
            color:white;
            border: 1px solid #dea34c;
            // font-size:12px;
            // padding: 0px 5px;
            // margin-left: 5px;
            // border-radius: 3px;
          }
        }
      }
      .detail-btns{
        display: flex;
        justify-content: flex-end;
        flex: 1;
        .detail-btn{
          margin: 19px 0 0 10px; /* 36/40 */
          img{
            width: 20px; /* 36/40 */
          }
          .click-extend{
            width: 20px;
            height: 20px;
          }
        }
        .attention-btn img{
          width: 20px;
        }
      }
    }
    .detail-infos{
      display: flex;
      padding: 12px 0; /* 25/40 */
      // margin-bottom: 6px;
      font-size: @font-size-13; /* 26/40 */
      line-height: 1.5;
      text-align: center;
      color: #777;
      background: #fff;
      border-bottom: 1px solid #f4f4f4;
      .info-cell{
        flex: 1;
        &:first-of-type{
          border-right: 1px solid #f4f4f4;
        }
        p.info-content{
          text-align: center;
          span{
            display: block;
          }
          span:nth-child(1){
            color: #000;
            font-size: 19px;
          }
        }
      }
    }
    .housing-title{
      padding-left: 12px;
      margin-left: -15px;
      line-height: 1.25;
      font-size: 19px;
      margin-bottom: 25px;
      color: #333;
      border-left: 3px solid #ff9600;
    }
    .housing-table{
      display: flex;
      flex-wrap: wrap;
      margin-top: 5px; /* 5/20 */
      font-size: 12px; /* 14/20 */
      line-height: 1.7;
      color: #777;
      .room-item{
        display: flex;
        width:100%;
        flex-wrap: wrap;
        text-align:center;
        border-bottom:1px solid #eee;
        &:nth-last-child(1){
          border:none;
          padding-bottom: 0px
        }
        &:first-child{
          padding-top: 0px
        }
        padding:15px 0px;
        .room-number{
          font-size:18px;
          font-weight:600;
        }
        .room-price{
          font-size:18px;
          font-weight:600;
          color:#ff3c00;
        }
        .room-info{
          color:#979797;
        }
        .room-status{
          color:white;
          .m-status{
            background:#ff9600;
            border-radius: 5px;
            padding:5px 10px;
          }
        }
        p{
          width: 50%;
          padding:10px 0px;
        }
      }
      .housing-item{
        width: 50%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        &.width-33{
          width: 33%;
          padding-left: 18px;
          background: url('../../images/rent/true.png') left no-repeat;
          background-size: 12px 12px;
          box-sizing: border-box;
        }
        span{
          color: #000;
          // font-weight: bold;
        }
      }
      .width-100{
        width: 100%;
      }
    }
    .f-text14 {
      font-size: 14px;
    }
    .houseMap{
      height: 180px;
      margin: 0 -15px;
    }
    .housing-intro{
      font-size: @font-size-13;
      color: #777;
      line-height: 1.7;
      text-align: justify;
    }
    .detail-foot{
      height: 45px;
    }
    .foot-bar{
      display: flex;
      justify-content: space-between;
      text-align: center;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: 45px;
      background: #fff;
      &:before{
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        position: absolute;
        top: 0;
        background: #f4f4f4;
      }
      .foot-btn{
        flex: 1;
        color: @theme-button-cancel-font-color;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        color: #777;
      }
      .sign-btn{
        background: #ff9600;
        color: #fff;
      }
      .contact-tel {
        color: #333;
      }
    }
    .contact{
      position: fixed;
      right: 15px;
      bottom: 60px;
      width: 64px;
      height: 70px;
      background: url('../../images/rent/detail_lx.png') center no-repeat;
      background-size: cover;
    }
  }
</style>
<style lang="less">
  @import "../../styles/baseVar.less";

  #apartment-detail{
    .detail-address{
      color: @color-999999;
      background: #fff;
      .weui-cell__hd{
        line-height: 1;
      }
      .location{
        width: 12px; /* 24/40 */
        height: 15px; /* 30/40 */
        margin-right: 15px; /* 30/40 */
      }
      .weui-cells{
        margin-top: 0;
        font-size: @font-size-15; /* 30/40 */
      }
      .weui-cells:before{
        // border:none;
        border-color:#f4f4f4;
      }
      .vux-label {
        width:15rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
    .detail-banner{
      .vux-icon-dot{
        background: rgba(0, 0, 0, .2);
        &.active{
          background: #fff;
        }
      }
    }
  }

</style>

<style lang='less'>
  #apartment-detail{
    .weui-btn{
      border-radius: 0;
    }
    .weui-cells{
      &:after{
        border-bottom: 1px solid #f4f4f4;
        transform: scaleY(1);
      }
    }
    .housing-link{
      background: #fff;
      border-top: 1px solid #f4f4f4;
      .weui-cells{
        margin-top: 0;
        &:before{
          display: none;
        }
        &:after{
          background: #f4f4f4;
          border-color: #f4f4f4;
        }
        .weui-cell:before{
          border-color: #f4f4f4;
        }
        .vux-label{
          font-size: 14px;
          color: #585858;
        }
        .weui-cell__ft{
          font-size: 14px;
          color: #777;
        }
      }
    }
  }
</style>
